<template>
  <div>
    <QupFormContainer :column="3">
      <el-form ref="form" :model="formData" :rules="formRules" label-width="160px">
        <el-form-item prop="marketName" label="市场名称">
          <span>{{ ctmMarketDTO.marketName }}</span>
        </el-form-item>
        <el-form-item prop="marketType" label="市场类型">
          <c-dict-range-view :value="ctmMarketDTO.marketType" dict-type-code="TOBE_MARKET_TYPE" domain-code="marketing" app-code="slm" />
        </el-form-item>
        <el-form-item prop="marketNatrue" label="市场属性">
          <c-dict-range-view :value="ctmMarketDTO.marketNatrue" dict-type-code="MARKET_NATURE" domain-code="marketing" app-code="slm" />
        </el-form-item>
        <!-- <el-form-item prop="dataSource" label="数据来源">
          <c-dict-range-view :value="ctmMarketDTO.dataSource" dict-type-code="CTM_MARKET_DATA_FROM" domain-code="marketing" app-code="slm" />
        </el-form-item> -->
        <!-- <el-form-item prop="dataSourceMsg" label="数据来源描述" :span="24">
          <span>{{ ctmMarketDTO.dataSourceMsg }}</span>
        </el-form-item> -->
        <!-- <el-form-item prop="appraisalPlan" label="考核计划">
          <c-dict-range-view :value="ctmMarketDTO.appraisalPlan" dict-type-code="CTM_APPRAISAL_PLAN" domain-code="marketing" app-code="slm" />
        </el-form-item> -->
        <el-form-item prop="weekNumber" label="周数">
          <span>{{ weeks[detail.weekNumber] }}</span>
        </el-form-item>
        <el-form-item prop="submitTime" label="客户经理提报时间">
          <span>{{ detail.submitTime }}</span>
        </el-form-item>
        <el-form-item prop="submitTime" label="上周进展程度">
          <c-dict-range-view :value="preWeeklyDetailDTO.progressStage" dict-type-code="CTM_MARKET_BUID_FOLLOW_UP_PROGRESS" domain-code="marketing" app-code="slm" />
        </el-form-item>
        <el-form-item prop="progressStage" label="本周进展程度">
          <c-dict-select v-model="formData.progressStage" dict-type-code="CTM_MARKET_BUID_FOLLOW_UP_PROGRESS" clearable placeholder="本周进展程度" style="width:200px" />
        </el-form-item>
        <template v-if="isOpenSubbranch">
          <el-form-item prop="isPayEarmestMoney" label="是否缴纳保证金/意向金">
            <c-dict-select v-model="formData.isPayEarmestMoney" dict-type-code="BOOLEANS" clearable placeholder="是否缴纳保证金/意向金" style="width:100%" />
          </el-form-item>
          <el-form-item prop="payEarmestMoneyTime" label="保证金缴纳时间">
            <el-date-picker v-model="formData.payEarmestMoneyTime" type="date" value-format="yyyy-MM-dd HH:mm:ss" clearable placeholder="选择日期" />
          </el-form-item>
          <el-form-item prop="isSuitableSite" label="是否有合适场地">
            <c-dict-select v-model="formData.isSuitableSite" dict-type-code="BOOLEANS" clearable placeholder="是否有合适场地" style="width:200px" />
          </el-form-item>
          <!-- <el-form-item v-if="hasIsSuitableSite && !isRectifyMarket" prop="estimatedArea" label="预估面积(㎡)">
            <el-input v-model="formData.estimatedArea" v-number.float="2" placeholder="预估面积" clearable />
          </el-form-item> -->
        </template>
        <el-form-item v-else-if="!isRectifyMarket" prop="isIntendedDealer" label="是否有意向经销商" label-width="160px">
          <c-dict-select v-model="formData.isIntendedDealer" dict-type-code="BOOLEANS" clearable placeholder="请选择" style="width:200px" />
        </el-form-item>
        <el-form-item v-if="hasCustomer" prop="isPreWeekSameDealer" label="是否与上周意向商家相同" label-width="160px">
          <c-dict-select v-model="formData.isPreWeekSameDealer" dict-type-code="BOOLEANS" clearable placeholder="是否与上周意向商家相同" @change="handleIsPreWeekSameDealerChange" />
        </el-form-item>
        <template v-if="showFieldCtr">
          <template v-if="!isOpenSubbranch">
            <el-form-item prop="dealerName" label="商家姓名">
              <el-input v-model.trim="formData.dealerName" placeholder="商家姓名" clearable />
            </el-form-item>
            <el-form-item prop="dealerAge" label="商家年龄">
              <el-input v-model="formData.dealerAge" placeholder="商家年龄" clearable />
            </el-form-item>
            <el-form-item prop="intentionLevel" label="意向等级">
              <Tip>
                <div slot="tip">
                  A类：确定与全友合作意向，有合作实力，有合适口岸，可快速签约；<br>
                  B类：明确与全友合作意向，但可能资金不足或口岸不达标；<br>
                  C类：有明确投资意向，对全友或其他竞品品牌；
                </div>
                <c-dict-select v-model="formData.intentionLevel" dict-type-code="CTM_INTENTION_LEVEL" clearable placeholder="意向等级" style="width:100%" />
              </Tip>
            </el-form-item>
          </template>
          <template v-if="!isOpenSubbranch">
            <el-form-item prop="industryQualification" label="现经营品牌/行业资历" :span="24">
              <el-input v-model="formData.industryQualification" type="textarea" show-word-limit maxlength="1024" :autosize="{minRows: 2}" placeholder="现经营品牌/行业资历" clearable />
            </el-form-item>
            <el-form-item prop="isArriveShore" label="是否到店/公司参观">
              <c-dict-select v-model="formData.isArriveShore" dict-type-code="BOOLEANS" clearable placeholder="是否到店/公司参观" style="width:100%" />
            </el-form-item>
          </template>
          <template v-if="(hasCustomer && !isRectifyMarket) && !isOpenSubbranch">
            <el-form-item prop="isPayEarmestMoney" label="是否缴纳保证金/意向金">
              <c-dict-select v-model="formData.isPayEarmestMoney" dict-type-code="BOOLEANS" clearable placeholder="是否缴纳保证金/意向金" style="width:100%" />
            </el-form-item>
            <el-form-item prop="payEarmestMoneyTime" label="保证金缴纳时间">
              <el-date-picker v-model="formData.payEarmestMoneyTime" type="date" value-format="yyyy-MM-dd HH:mm:ss" clearable placeholder="选择日期" />
            </el-form-item>
          </template>
          <template v-if="hasCustomer && !isRectifyMarket && !isOpenSubbranch">
            <el-form-item prop="budgetedAmount" label="预算投入金额">
              <el-input v-model="formData.budgetedAmount" v-number.float="2" placeholder="预算投入金额" clearable>
                <!-- <span slot="suffix">万</span> -->
                <template slot="append">万</template>
              </el-input>
            </el-form-item>
          </template>
          <template v-if="!isOpenSubbranch">
            <el-form-item prop="isSuitableSite" label="是否有合适场地">
              <c-dict-select v-model="formData.isSuitableSite" dict-type-code="BOOLEANS" clearable placeholder="是否有合适场地" style="width:100%" />
            </el-form-item>
          </template>
          <el-form-item v-if="showIsPreWeekSameSite" prop="isPreWeekSameSite" label="是否与上周场地信息相同">
            <c-dict-select v-model="formData.isPreWeekSameSite" dict-type-code="BOOLEANS" clearable placeholder="是否与上周场地信息相同" @change="handleIsPreWeekSameSiterChange" />
          </el-form-item>
          <el-form-item v-if="hasIsSuitableSite && !isRectifyMarket" prop="estimatedArea" label="预估面积(㎡)">
            <el-input v-model="formData.estimatedArea" v-number.float="2" placeholder="预估面积" clearable />
          </el-form-item>
          <el-form-item prop="address" label="场地详细地址" :span="24">
            <el-input v-model="formData.address" type="textarea" show-word-limit maxlength="1024" :autosize="{minRows: 2}" placeholder="场地详细地址" clearable />
            <p class="tip">※请补充完末级地址信息，如区县、街道、XX路、XX号</p>
          </el-form-item>
        </template>
        <el-form-item prop="isCurrentMonthMakeMap" label="本月是否可测绘">
          <c-dict-select v-model="formData.isCurrentMonthMakeMap" dict-type-code="BOOLEANS" clearable placeholder="本月是否可测绘" />
        </el-form-item>
        <el-form-item prop="estimatedSurveyTime" label="预计测绘时间">
          <el-date-picker v-model="formData.estimatedSurveyTime" type="date" value-format="yyyy-MM-dd HH:mm:ss" clearable placeholder="选择日期" />
        </el-form-item>
        <!-- <el-form-item prop="estimatedDrawingTime" label="预计报图时间">
          <el-date-picker v-model="formData.estimatedDrawingTime" type="date" value-format="yyyy-MM-dd HH:mm:ss" clearable placeholder="选择日期" />
        </el-form-item> -->
        <el-form-item prop="remark" label="跟进说明" :span="24">
          <el-input v-model="formData.remark" type="textarea" show-word-limit maxlength="1024" :autosize="{minRows: 2}" placeholder="跟进说明" clearable />
          <p v-show="formData.isProgress !== '' && [0,'0'].includes(formData.isProgress)" class="tip">※无进展时，请详细描述开展计划、市场情况、陌拜结果、人口、楼盘等情况</p>
        </el-form-item>
      </el-form>
    </QupFormContainer>
    <c-title title="最后一次审核记录">
      <QupList :column="1" sep="：" default-value="" label-position="right" label-width="100">
        <QupListItem label="审核结果" :value="ctmShopBuildWeekTaskAduitDTO.aduitStatus" dict-type-code="REVIEW_RESULT" :prop-enum="{domainCode:'marketing',appCode:'slm'}" :span="24" />
        <QupListItem label="审核意见" :value="ctmShopBuildWeekTaskAduitDTO.aduitFialRemark" :span="24" />
      </QupList>
    </c-title>
    <c-title title="上月最后一次审批结果">
      <QupList :column="1" sep="：" default-value="" label-position="right" label-width="100">
        <QupListItem label="审核结果" :value="preCtmShopBuildWeekTaskAduitDTO.aduitStatus" dict-type-code="REVIEW_RESULT" :prop-enum="{domainCode:'marketing',appCode:'slm'}" :span="24" />
        <QupListItem label="审核意见" :value="preCtmShopBuildWeekTaskAduitDTO.aduitFialRemark" :span="24" />
      </QupList>
    </c-title>
  </div>
</template>
<script>
import Tip from '@/components/Tip'
export default {
  name: 'EditForm',
  components: {
    Tip
  },
  props: {
    detail: {
      type: Object,
      default: () => ({})
    },
    isAudit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      weeks: {
        1: '第一周',
        2: '第二周',
        3: '第三周',
        4: '第四周',
        5: '第五周',
        6: '第六周'
      },
      formData: {
        address: '', //	具体详细地址
        budgetedAmount: '', //	预算金额
        estimatedArea: '', // 预估面积
        dealerAge: '', //	商家年纪
        dealerName: '', //	商家姓名
        estimatedDrawingTime: '', //	预计报图时间
        isCurrentMonthMakeMap: '', // 本月是否可测绘
        estimatedSurveyTime: '', //	预计测绘时间
        finallyAduitId: '', //	最后审核记录ID
        id: '', //
        industryQualification: '', //	行业资历
        intentionLevel: '', //	意向等级
        isArriveShore: '', //	是否到店 0否 1是
        isIntendedDealer: '', //	是否有意向经销商 0否 1是
        isPreWeekSameDealer: '', // 是否与上周意向商家相同
        isPayEarmestMoney: '', //	是否缴纳意向保证金 01 否 02 是
        isProgress: 0, //	是否有进展 0 否 1是
        isSuitableSite: '', //	是否有合适场地 0否 1是
        isPreWeekSameSite: '', // 是否与上周场地信息相同
        maintenanceStage: '', //	跟进维护进度
        marketId: '', //	市场ID
        payEarmestMoneyTime: '', //	意向保证金缴纳时间
        progressStage: '', //	本周进展程度
        remark: '', //	跟进说明
        shopReformTaskFollowUpId: '', //	月任务ID
        weekNumber: '' //	周数
      }
    }
  },
  computed: {
    ctmMarketDTO() {
      return this.detail.ctmMarketDTO || {}
    },
    ctmShopBuildWeekTaskAduitDTO() {
      return this.detail.ctmShopBuildWeekTaskAduitDTO || {}
    },
    // 上周任务信息
    preWeeklyDetailDTO() {
      return this.detail.preWeeklyDetailDTO || {}
    },
    // 上周任务信息审核信息
    preCtmShopBuildWeekTaskAduitDTO() {
      return this.preWeeklyDetailDTO.ctmShopBuildWeekTaskAduitDTO || {}
    },
    formRules() {
      const { isCurrentMonthMakeMap } = this.formData
      return {
        isProgress: [{ required: true, message: '请选择是否有进展', trigger: 'change' }],
        progressStage: [{ required: [1, '1'].includes(this.formData.isProgress), message: '请选择本周进展程度', trigger: 'change' }],
        remark: [{ required: true, message: '请输入跟进说明', trigger: 'change' }],
        isCurrentMonthMakeMap: [{ required: true, message: '请选择本月是否可测绘', trigger: 'change' }],
        estimatedSurveyTime: [{ required: [1, '1'].includes(isCurrentMonthMakeMap), message: '请选择预计测绘时间', trigger: 'change' }],

        dealerName: [{ required: true, message: '请输入商家姓名', trigger: 'change' }],
        dealerAge: [{ required: true, message: '请输入商家年龄', trigger: 'change' }],
        intentionLevel: [{ required: true, message: '请选择意向等级', trigger: 'change' }],
        isPayEarmestMoney: [{ required: true, message: '请选择是否缴纳保证金/意向金', trigger: 'change' }],
        payEarmestMoneyTime: [{ required: [1, '1'].includes(this.formData.isPayEarmestMoney), message: '请选择保证金缴纳时间', trigger: 'change' }],
        industryQualification: [{ required: true, message: '请输入现经营品牌/行业资历', trigger: 'change' }],
        isArriveShore: [{ required: true, message: '请选择是否到店/公司参观', trigger: 'change' }],
        budgetedAmount: [{ required: true, message: '请输入预算投入金额', trigger: 'change' }],
        estimatedArea: [{ required: this.hasIsSuitableSite, message: '请输入预估面积', trigger: 'change' }],
        isSuitableSite: [{ required: true, message: '请选择是否有合适场地', trigger: 'change' }],
        isPreWeekSameSite: [{ required: true, message: '请选择是否与上周场地信息相同', trigger: 'change' }],
        isIntendedDealer: [{ required: true, message: '请选择是否意向经销商', trigger: 'change' }],
        isPreWeekSameDealer: [{ required: true, message: '请选择是否与上周意向商家相同', trigger: 'change' }],
        address: [{ required: this.hasIsSuitableSite, message: '请输入场地详细地址', trigger: 'change' }]
      }
    },
    // 增开分店
    isOpenSubbranch() {
      const { marketType, marketNatrue } = this.ctmMarketDTO
      return marketType === 'A' && marketNatrue === 'L'
    },
    // 是整改市场
    isRectifyMarket() {
      return this.ctmMarketDTO.marketType === 'B'
    },
    // 字段显示控制
    showFieldCtr() {
      return (this.isOpenSubbranch && this.hasIsSuitableSite) || (!this.isOpenSubbranch && this.hasCustomer)
    },
    // 是否显示 是否与上周场地信息相同
    showIsPreWeekSameSite() {
      const { isIntendedDealer, isSuitableSite } = this.formData
      const one = [1, '1']
      return (one.includes(isIntendedDealer) || this.isOpenSubbranch) && one.includes(isSuitableSite)
    },
    // 是否有意向经销商
    hasCustomer() {
      return [1, '1'].includes(this.formData.isIntendedDealer)
    },
    // 是否有合适场地
    hasIsSuitableSite() {
      return [1, '1'].includes(this.formData.isSuitableSite)
    }
  },
  watch: {
    detail: {
      handler() {
        this.detail2FormData()
      },
      immediate: true
    },
    showIsPreWeekSameSite: {
      handler(v) {
        if (!v) {
          this.$set(this.formData, 'isPreWeekSameSite', '')
        }
      }
    }
  },
  methods: {
    detail2FormData() {
      this.formData = { ...(this.detail || {}) }
      'ctmMarketDTO ctmShopBuildWeekTaskAduitDTO preWeeklyDetailDTO reformTaskFollowUpDTO'.split(' ').forEach(k => {
        delete this.formData[k]
      })
      if (this.formData.isProgress === undefined) {
        this.$set(this.formData, 'isProgress', 0)
      }
      // 非审核不带上周测绘信息
      if (!this.isAudit) {
      // 44353   【待开发及整改市场周任务】页面调整
      // 2.“本月是否可测绘”、“预计测绘时间”不自动带上周结果，由提报人手工维护
        'isCurrentMonthMakeMap estimatedSurveyTime'.split(' ').forEach(k => {
          this.$set(this.formData, k, '')
        })
      }
      if ((this.detail.ctmMarketDTO || {}).marketType === 'B') {
        this.$set(this.formData, 'isIntendedDealer', '0')
      }
      const { marketType, marketNatrue } = this.detail.ctmMarketDTO
      if (marketType === 'A' && !['A', 'B', 'C'].includes(marketNatrue)) {
        this.set4FieldByPreWeek()
      }
    },
    validate() {
      return this.$refs.form.validate().then(() => this.formData)
    },
    // 设置4个字段，根据上周已完成值
    set4FieldByPreWeek(v) {
      const keys = 'isPayEarmestMoney payEarmestMoneyTime budgetedAmount'.split(' ')
      for (const k of keys) {
        const d = this.detail[k]
        const p = this.preWeeklyDetailDTO[k]
        v = d !== undefined && d !== null && d !== '' ? d : ((p !== undefined && p !== null) ? p : '')
        this.$set(this.formData, k, v)
      }
    },
    handleIsPreWeekSameDealerChange(v) {
      const keys = 'dealerName dealerAge intentionLevel isPayEarmestMoney payEarmestMoneyTime industryQualification isArriveShore budgetedAmount'.split(' ')
      if ([1, '1'].includes(v)) {
        for (const k of keys) {
          this.$set(this.formData, k, this.preWeeklyDetailDTO[k] !== undefined ? this.preWeeklyDetailDTO[k] : '')
        }
      } else {
        for (const k of keys) {
          this.$set(this.formData, k, this.detail[k] !== undefined ? this.detail[k] : '')
        }
      }
    },
    handleIsPreWeekSameSiterChange(v) {
      const keys = 'address estimatedArea'.split(' ')
      if ([1, '1'].includes(v)) {
        for (const k of keys) {
          this.$set(this.formData, k, this.preWeeklyDetailDTO[k] !== undefined ? this.preWeeklyDetailDTO[k] : '')
        }
      } else {
        for (const k of keys) {
          this.$set(this.formData, k, this.detail[k] !== undefined ? this.detail[k] : '')
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.tip{
  color: red;
  font-size: 12px;
  margin: 0;
  padding-top: 4px;
}
</style>
